<template>
	<div class="header header-layout">
		<div class="header-fold">
			<i class="iconfont icon-zhankai"></i>
		</div>
		<!--<div class="header-input">
			<label class="placeholder" @click="focus" v-html="placeholder"></label>
			<input type="text" ref="header_input" v-model="searchData"/>
			<i class="iconfont icon-sousuo" @click="focus"></i>
		</div>-->
		<s-simulation-search-input v-model="searchData" placeholder="请输入查询内容..."></s-simulation-search-input>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchData: "",
				placeholder: "请输入查询内容..."
			}
		},
		methods: {
			focus() {
				this.$refs["header_input"].focus();
			}
		},
		watch: {
			searchData() {
				this.searchData.length === 0 ? this.placeholder="请输入查询内容..." : this.placeholder = "";
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		width: 100%;
		.header-fold {
			i {
				font-size: rem(20);
			}
		}
	}
</style>